<template>
  <div>
     <table rules="all" border="1px">
      <thead>
        <tr>
          <th>编号</th>
          <th>品牌名称</th>
          <th>创立时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody v-if="list.length">
         <tr v-for="item in list" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.date}}</td>
          <td><a class="del" href="#" @click="remove(item.id)">删除</a></td>
        </tr>
      </tbody>
       <tbody v-else>
        <tr class="last">没有数据喽~</tr>
       </tbody>
     </table>
   </div>
</template>
 
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      list:[
        {id:1,name:'奥迪',date:'2020-08-03'},
        {id:2,name:'奔驰',date:'2021-03-12'},
        {id:3,name:'宝马',date:'2022-08-03'}
      ]
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    remove(id){
      const index=this.list.findIndex(item=>item.id===id)
      this.list.splice(index,1)
    }
  }
};
</script>

<style scoped>
     table{
      width: 500px;
      margin: 0 auto;
      text-align: center;

     }
     tr{
      height: 35px;
     }
      th{
        background-color: #0094FF;
        color: #fff;
        font-size: 20px;
        height: 40px;
        line-height: 40px;
      }
     .del{
        text-decoration: none;
        color: #333;
        padding: 1px 10px;
        border: 1px solid #333;
        border-radius: 5px;
        background-color: #E5E5E5;
     }
     .last{
      height: 40px;
      line-height: 40px;
     }
</style>